<template>
  <div class="photo-upload">
    <div v-for="(item, index) in imgs" :key="index" class="imgwrap">
      <img class="avatar" :src="item" />
      <div class="modal">
        <span class="myBadge" @click="delList(index)">-</span>
      </div>
    </div>
    <el-upload
      class="avatar-uploader"
      action="http://exam.aosaiban.com/api/v1/upload"
      :show-file-list="false"
      :on-success="handleAvatarSuccess"
      :before-upload="beforeAvatarUpload"
      :on-progress="handleProgress"
      multiple>
      <el-progress v-if="progressPercent > -1" type="circle" :percentage="progressPercent" color="#0366bb"></el-progress>
      <i v-else class="el-icon-plus avatar-uploader-icon"></i>
    </el-upload>
  </div>
</template>

<script>
  export default {
    name: 'PhotoUpload',
    model: {
      prop: 'imgs',
      event: 'change'
    },
    props: {
      onSuccess: Function,
      imgs: Array
    },
    data() {
      return {
        self_imgs: [],
        progressPercent: -1
      };
    },
    watch: {
      self_imgs (nval, oval) {
        this.$emit('change', nval)
      }
    },
    methods: {
      handleAvatarSuccess(res, file) {
        this.self_imgs.push(res.data.url)
      },
      beforeAvatarUpload(file) {
        // const isJPG = file.type === 'image/jpeg';
        // const isLt2M = file.size / 1024 / 1024 < 2;

        // if (!isJPG) {
        //   this.$message.error('上传头像图片只能是 JPG 格式!');
        // }
        // if (!isLt2M) {
        //   this.$message.error('上传图片大小不能超过 2MB!');
        // }
        // return isLt2M;
        return true;
      },
      delList(index) { // 移除imgs中指定下标的img
        this.self_imgs.splice(index, 1)
      },
      handleProgress(event, file, fileList) {
        if (event.percent == 100) {
          this.progressPercent = -1
        } else {
          this.progressPercent = parseInt(event.percent)
        }
      }
    }
  }
</script>
<style>
  .avatar-uploader {
    display: flex;
  }
  .avatar-uploader .el-upload {
    line-height: 126px;
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    width: 126px;
    height: 126px;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #0366bb;
  }
  .avatar-uploader-icon {
    font-size: 24px;
    color: #8c939d;
    text-align: center;
    width: 126px;
    height: 126px;
    line-height: 126px !important;
  }
  .photo-upload .avatar {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;
  }
  .photo-upload .imgwrap {
    position: relative;
    width: 120px;
    height: 120px;
    margin-right: 14px;
    border-radius: 6px;
  }
  .photo-upload .imgwrap .myBadge {
    background: #fb5e5e;
    width: 14px;
    height: 14px;
    font-size: 14px;
    line-height: 14px;
    text-align: center;
    color: #fff;
    border-radius: 50%;
    position: absolute;
    top: -7px;
    right: -7px;
    cursor: pointer;
  }
  .photo-upload .imgwrap .modal {
    background: rgba(0,0,0,0.5);
    border-radius: 6px;
    text-align: center;
    color: #fff;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    display: none;
  }
  .photo-upload .imgwrap:hover .modal { display: block;}
  .photo-upload {
    width: 100%;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
  }
</style>
